Flutter控件之Text Widgets

已于 2022-08-11 15:46:54 修改
阅读量3.9k 收藏 3
点赞数 1
分类专栏： Android 进阶 文章标签： 控件 flutter text dart
于 2018-01-08 19:55:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/johnWcheung/article/details/79006562
版权
Android 进阶 专栏收录该内容
100 篇文章 7 订阅 ¥29.90 ¥99.00
订阅专栏
本文介绍了Flutter中用于显示文本的控件，包括Text用于显示单一样式文本，RichText支持丰富样式展示，以及DefaultTextStyle和Directionality用于管理和控制文本样式及文字方向。通过DefaultTextStyle和Directionality，开发者可以方便地统一模块的样式，并利用InheritedWidget实现属性改变的高效通知。
摘要由CSDN通过智能技术生成

负责显示文本和定义显示样式的控件。

  • Text

    显示单一样式的文本

    new Text(
  'Hello, $_name! How are you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: new TextStyle(fontWeight: FontWeight.bold),
)

    如果想让文本控件响应Touch事件，要把该控件放在GestureDetector控件里使用，如果是material design应用，可以考虑直接使用FlatButton实现可Touch的文本。

  • RichText

    显示丰富样式的文本

    new RichText(
  text: new TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      new TextSpan(text: 'bold', style: new TextStyle(fontWeight: FontWeight.bold)),
      new TextSpan(text: ' world!'),
    ],
  ),
)
<
了解本专栏 订阅专栏 解锁全文
@ZhangJun
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
【Flutter 面试题】 WidgetsApp和MaterialApp的区别什么?
Code Metaverse
06-27 449
WidgetsApp和MaterialApp的区别什么?
Flutter组件：文字组件Text Widget
小小的苗儿的博客
03-26 182
Text Widget Flutter Text Widget // Dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'text widget'
Flutter学习之Text Widget
ayang818 's blog
02-15 221
//widget import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( ...
flutter开发实战-AssetBundle读取指定packagename的文件
最新发布
一名开发者
07-24 346
flutter开发实战-AssetBundle读取指定packagename的文件在Flutter中，如果你想从特定的包名中读取资源文件，你可以使用rootBundle类来访问packages目录下的资源。下面使用rootBundle来读取包名为my_package的资源文件user.json。
Flutter 之TextWidget
日积月累
05-22 207
`import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildC...
flutter中的Text控件
wgefcelgu的专栏
08-02 466
在该构造函数中， `textSpan` 属性被设置为 `null`。- `textHeightBehavior` ：确定文本高度的行为。- `locale` ：用于选择文本字体或样式的区域设置。- `textScaleFactor` ：文本的缩放因子。- `selectionColor` ：文本选择的颜色。- `textAlign` ：文本在组件中的对齐方式。希望这能对您有所帮助！- `textDirection` ：文本的方向。- `style` ：应用于文本的样式。
flutter之Text组件
shenshulong的博客
12-16 160
示例代码： new Text( //文本 'hello world', //文本对齐方式 textAlign: TextAlign.center, //文本最多显示几行 maxLines:1, maxLines:1, //超出隐藏的样式(文字超出部分怎么处理) // overflow: TextOverflow.clip 直接切掉 // overf...
Flutter - 控件之 Text
iOS_PING的专栏
10-15 888
Flutter - 控件之 Text效果预览TextTextStyleTextAlignTextDirectionTextOverflow 效果预览 Text Text显示一个样式单一的文本字符串，可以显示单行也可以显示多行。 1、Text参数解析： Text( this.data, { Key key, this.style, //文本样式，默...
Flutter-Text Widget 文本组件的使用
MagicGirl
05-14 286
TextStyle 类库 ：https://docs.flutter.io/flutter/painting/TextStyle-class.html import 'package:flutter/material.dart'; // 写法1： void main() => runApp(MyApp()); // 写法2： // void main() { // runApp(MyA...
Flutter开发之基础Widgets
xiangzhihong8的专栏
08-02 580
简介 概念 Flutter里有一个非常重要的核心理念：一切皆为组件，Flutter的所有元素都是由控件构成的。 与原生开发中控件所代表的含义不同，Flutter中widget的概念更加广泛，它不仅可以表示UI元素，也可以表示一些功能性的组件，如用于手势检测的 GestureDetector widget、用于应用主题数据传递的Theme等等。而原生开发中的控件通常只是指UI元素。由于Flutter...
Flutter基本控件介绍
热门推荐
学无止境
01-07 1万+
Flutter控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，例如，Container是一种常用的控件，由负责布局、绘画、定位和大小调整的几个控件组成，具体来说，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件组成，而不是将Container子类化来产生自定义效果，您可以用这种新...
Flutter 控件 Card
weixin_38107457的博客
05-18 229
import 'package:flutter/material.dart'; import 'package:flutter/src/foundation/key.dart'; import 'package:flutter/src/widgets/framework.dart'; import 'package:flutter/widgets.dart'; class CardDemo extends StatefulWidget { const CardDemo({Key? key}) : s.
Text widget
weixin_38166852的博客
07-03 140
Text( 'content', textAlign:TextAlign.center, maxLines:1, overflow:TextOverFlow.ellipsis, textScaleFactor: 1.5,//系统字体大小改变，字也跟着改变 style:TextStyle( fontSize:25.0,//字体大小 ...
Flutter 学习之 Text Widget
Vinku的博客
12-19 180
import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ return MaterialApp( title:'123', home:Scaffold( body:Center( .
Flutter组件学习（一）—— Text组件
lovecyg123的博客
11-26 553
序言 之前说会给大家一一讲解 Flutter 中的组件，今天咱们就从 Text 组件开始，无图言X，先上图： Text组件的API 我们先来看一下 Text 组件的构造方法 class Text extends StatelessWidget { const Text(this.data, { Key key, this.style, this.textAlign, ...
Flutter中常用的按钮组件-Text(文本)
不二菜菜子的博客
01-31 356
Flutter中常用的按钮组件-Text(文本)
（五）TextWidget
JaysenLeo
03-09 382
TextWidget import 'package:flutter/material.dart'; /// 谷歌推出基础样式，大气美观 /* Flutter 一切皆Widget TextWidget的常用属性 TextAlign 文本对齐属性 maxLines 文本显示的最大行 overflow 控制文本的溢出效果 */ void main() =&amp;amp;amp;amp;amp;amp;gt; runApp(MyApp...
Flutter Text组件
xiangxiongfly
05-30 577
文章目录文本组件TextTextSpanDefaultTextStyleText & Container 文本组件 Text 基本属性 textAlign：文本对齐方式。 maxLines：文本显示最大行数。 overflow：超出文本显示方式，默认显示...。 textScaleFactor：文本缩放因子。 TextStyle属性 TextStyle用于指定文本显示的样式，如颜色、字体、粗细、背景等。 color：设置文本颜色。 background：设置文本背景颜色。 fontSize：设置字体
Flutter控件--TextFiled
05-26
Flutter中的TextField是一个常用的输入控件，它允许用户在应用程序中输入文本。 TextField通常用于表单中，可以接收用户输入的文本，比如用户名、密码、电子邮件地址等。 以下是一个基本的TextField示例： ```dart TextField( decoration: InputDecoration( hintText: '请输入文本', ), ); ``` 在上面的示例中，我们使用了decoration属性来设置TextField的外观，其中hintText属性用于设置提示文本。 TextField还有许多其他的属性可以设置，比如maxLength（允许输入的最大长度）、keyboardType（键盘类型）、obscureText（是否隐藏输入内容）等等。 下面是一个更完整的TextField示例： ```dart class MyTextField extends StatefulWidget { @override _MyTextFieldState createState() => _MyTextFieldState(); } class _MyTextFieldState extends State<MyTextField> { final TextEditingController _controller = TextEditingController(); @override Widget build(BuildContext context) { return TextField( controller: _controller, maxLength: 10, keyboardType: TextInputType.text, obscureText: true, decoration: InputDecoration( hintText: '请输入文本', labelText: '文本框', prefixIcon: Icon(Icons.text_fields), suffixIcon: IconButton( icon: Icon(Icons.clear), onPressed: () { setState(() { _controller.clear(); }); }, ), border: OutlineInputBorder(), ), onChanged: (value) { print('输入的文本为：$value'); }, ); } } ``` 在上面的示例中，我们使用了TextEditingController来控制TextField的文本内容，maxLength属性限制了用户输入的最大长度为10，keyboardType属性指定了键盘类型为文本类型，obscureText属性设置为true表示隐藏输入内容。 此外，我们还设置了decoration属性来自定义TextField的外观，包括了输入提示文本、标签文本、前缀图标、后缀图标和边框样式等。 最后，我们通过onChanged回调函数来监听用户输入的文本，并打印出来。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@ZhangJun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值